<template>
<div>
  <van-nav-bar
      title="搜索"
      left-arrow
      @click-left="onClickLeft"
  />
    <div class="activity_search">
      <h3>正在秒杀</h3>
        <div class="acti-view" v-for="(item,index) in runningActivity" :key="index" v-show="flag(item.activity_name,item.activity_id)==true">
          <div class="acti-view-left">
            <span class="acti-view-left-rate">34.28%</span>
            <span class="acti-view-left-meta">近一年增长率</span>
          </div>
          <div class="acti-view-center">
            <span class="acti-view-center-test">{{item.activity_name}}</span>
            <div class="acti-view-center-progress">
              <van-progress :percentage="item.t" stroke-width="8" />
            </div>
          </div>
          <div class="acti-view-right">
            <span class="acti-view-right-icon">
              <div>
                <img src="@/assets/icon/home/collection.svg">
              </div>
            </span>
            <div class="acti-view-right-rate"> 
              ssss
            </div>
          </div>
        </div>
      <h3>即将开始</h3>
      <div class="acti-view" v-for="(item,index) in upcomingActivity" :key="index" v-show="flag(item.activity_name,item.activity_id)==true">
          <div class="acti-view-left">
            <span class="acti-view-left-rate">34.28%</span>
            <span class="acti-view-left-meta">近一年增长率</span>
          </div>
          <div class="acti-view-center">
            <span class="acti-view-center-test">{{item.activity_name}}</span>
            <div class="acti-view-center-progress">
              <van-progress :percentage="item.t" stroke-width="8" />
            </div>
          </div>
          <div class="acti-view-right">
            <span class="acti-view-right-icon">
              <div>
                <img src="@/assets/icon/home/collection.svg">
              </div>
            </span>
            <div class="acti-view-right-rate"> 
              ssss
            </div>
          </div>
        </div>
  </div>
</div>
  
</template>

<script>
import {activityList} from '@/api/activity'
export default {
  data(){
    return {
      runningActivity:[],
      upcomingActivity:[]
    }
  },
  computed:{
    
  },
  created(){
    this.getactivityList()
  },
  methods:{
    flag(value,id){
      let str = this.$route.query.q;
      if(value.match(str)!=null){
        return true
      }
      return false;
    },
    onClickLeft(){
      this.$router.push('/home/activity')
    },
    // 获取当前秒杀和即将开放的秒杀产品
    getactivityList(){
      activityList().then(res => {
        if(res.code==0){
        }
      if(res.data.running_activity!=null){
        for(let i =0;i<res.data.running_activity.length;i++){
          let ob = {};
          ob = res.data.running_activity[i];
          let product_now_number = ((res.data.running_activity[i].product_total - res.data.running_activity[i].product_now_number) / res.data.running_activity[i].product_total)*100;
          let t = parseInt(product_now_number);
          ob.t = t;
          let flag = false;
          ob.flag = flag;
          this.runningActivity.push(ob);
        }
      }
      if(res.data.upcoming_activity!=null){
        for(let i=0;i<res.data.upcoming_activity.length;i++){
          let ob = {};
          ob = res.data.upcoming_activity[i];
          let product_now_number = ((res.data.upcoming_activity[i].product_total - res.data.upcoming_activity[i].product_now_number) / res.data.upcoming_activity[i].product_total)*100;
          let t = parseInt(product_now_number);
          ob.t = t;
          let flag = false;
          ob.flag = flag;
          this.upcomingActivity.push(ob);
        }
      }  
    })
  },
  }
}
</script>

<style lang="less">
















.van-nav-bar__arrow {
    margin-right: 4px;
    font-size: 25px;
  }
  .van-nav-bar__title {
    max-width: 60%;
    margin: 0 auto;
    color: #323233;
    font-weight: 500;
    font-size: 20px;
  }
  .van-nav-bar .van-icon {
    color: #151515;
  }
  
</style>